<template>
  <div class="items">
    <!-- 轮播图显示 -->
    <van-swipe :height="220" class="item-swipe" :autoplay="3000">
      <van-swipe-item v-for="image in images" :key="image">
        <van-image
          width="100%"
          height="220px"
          fit="contain"
          :src="'data:image;base64,' + image"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品详情区 -->
    <van-cell-group>
      <van-cell>
        <div class="items-title">{{ name }}</div>
        <div class="items-class">{{ item_class }}</div>
        <van-row type="flex" justify="space-between" class="items-express">
          <van-col span="10"
            ><span class="items-cur-price">￥{{ current_price }} </span
            ><span v-if="original_price > current_price" class="items-ori-price"
              >￥{{ original_price }}</span
            ></van-col
          >
          <van-col style="text-align: right; margin-right: 12px;" span="10"
            >剩余：{{ in_stock }}</van-col
          >
        </van-row>
      </van-cell>
    </van-cell-group>
    <!-- 可选内容区 -->
    <van-cell-group>
      <van-cell value="进入店铺" icon="shop-o" is-link @click="onShopClick">
        <template slot="title">
          <span class="van-cell-text">{{ shop_name }}</span>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell icon="info-o" :label="info" title="商品简介" />
    </van-cell-group>

    <div style="padding:0;">
      <van-cell icon="comment-o" :title="'评价 (' + reviews.length + ')'" />
    </div>

    <!-- 商品评论区域 -->
    <div id="comment-area" v-for="(item, index) in reviews" :key="index">
      <van-cell-group style="padding:10px;">
        <van-row type="flex" justify="space-between" class="items-express">
          <van-col span="10"
            ><van-rate
              v-model="item.star"
              readonly
              style="padding: 5px 0 0 0;"
              :size="20"
              color="#ee0a24"
              void-icon="star"
              void-color="#eee"
          /></van-col>
          <van-col span="10"
            ><van-field
              style="padding: 0px 0px;"
              :value="item.created_time"
              disabled
              size="large"
              input-align="right"
            ></van-field
          ></van-col>
        </van-row>

        <van-field
          style="padding: 0px 0px;"
          :value="item.remark"
          type="textarea"
          readonly
          autosize
          size="large"
        >
        </van-field>
      </van-cell-group>
    </div>
    <div style="height:50px;" />

    <van-goods-action style="margin:5px;">
      <van-goods-action-button
        v-if="editable"
        color="#D4AC0D"
        type="warning"
        text="修改商品信息"
        @click="onEditClick"
      />
      <van-goods-action-button
        v-if="!editable && logined"
        color="#f44"
        type="warning"
        text="加入购物车"
        @click="onAddCartClick"
      />

      <van-goods-action-button
        v-if="!editable && logined"
        type="primary"
        text="立即购买"
        @click="onBuyClick"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { axios, API_URL } from "../../api"
import {
  Tag,
  Row,
  Col,
  Icon,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  Toast,
  GoodsActionButton,
  GoodsAction,
  Field,
  Button,
  Rate,
  Image
} from "vant"

export default {
  components: {
    [Button.name]: Button,
    [Row.name]: Row,
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsActionButton.name]: GoodsActionButton,
    [GoodsAction.name]: GoodsAction,
    [Field.name]: Field,
    [Rate.name]: Rate,
    [Image.name]: Image
  },

  data() {
    return {
      editable: false,
      logined: false,

      item_id: "",
      name: "",
      current_price: "",
      original_price: "",
      in_stock: "",
      info: "",
      sales: "",
      shop_id: "",
      item_class: "",
      images: "",
      //评价指数
      rating: "bad",
      shop_name: "",
      reviews: []
    }
  },
  methods: {
    onEditClick() {
      this.$router.push({
        name: "edititem",
        params: { editType: "editOld", item_id: this.item_id }
      })
    },
    onShopClick() {
      this.$router.push({ name: "shop", params: { shop_id: this.shop_id } })
    },
    onAddCartClick() {
      axios
        .post(
          API_URL + "cart",
          {
            item_id: this.item_id
          },
          {
            headers: {
              Authorization: this.$store.state.customer_token
            }
          }
        )
        .then(() => {
          Toast("加入购物车成功")
        })
        .catch(err => {
          if (err.response.status == 401) {
            this.$router.replace({ name: "login" })
          } else {
            Toast("商品已在购物车里")
          }
        })
    },
    onBuyClick() {
      this.onAddCartClick()
      this.$store.commit("SET_TRANSITION", "left")
      this.$router.push({ name: "cart" })
    },
    onReviewEdit() {}
  },
  /* 预载商品页详情，通过登录状态判断是否显示可编辑按钮和加入购物车按钮 */
  mounted: function() {
    // 预载商品基本信息
    this.item_id = this.$route.params.item_id
    axios
      .get(API_URL + "items/" + this.$route.params.item_id, {})
      .then(response => {
        this.name = response.data.name
        this.current_price = response.data.current_price
        this.original_price = response.data.original_price
        this.in_stock = response.data.in_stock
        this.info = response.data.info
        this.sales = response.data.sales
        this.shop_id = response.data.shop_id
        this.item_class = response.data.item_class
        this.images = response.data.images

        axios
          .get(API_URL + "shops/" + this.shop_id)
          .then(response => {
            this.shop_name = response.data.name
          })
          .catch(err => {
            console.error(err)
          })
        // 可否编辑条件
        if (this.$store.state.shop_token) {
          axios
            .get(API_URL + "shop", {
              headers: {
                authorization: this.$store.state.shop_token
              }
            })
            .then(response => {
              if (this.shop_id == response.data.shop_id) {
                this.editable = true
              }
            })
            .catch(err => {
              console.error(err)
            })
        }
      })
      .catch(err => {
        console.error(err)
      })
    // 预载评论内容
    // todo: 下拉分页
    axios
      .get(API_URL + "review/search", {
        params: { item_id: this.$route.params.item_id }
      })
      .then(response => {
        let review_ids = response.data.review_ids

        review_ids.forEach(review_id => {
          axios
            .get(API_URL + "review/" + review_id, {})
            .then(response => {
              let review = {}
              review.review_id = response.data.review_id
              review.star = response.data.star
              review.remark = response.data.remark
              review.created_time = response.data.created_time
              this.reviews.push(review)
            })
            .catch(err => {
              console.error(err)
            })
        })
      })
      .catch(err => {
        console.error(err)
      })
    // 判断是否顾客登录
    if (this.$store.state.customer_token) {
      axios
        .get(API_URL + "customer", {
          headers: {
            authorization: this.$store.state.customer_token
          }
        })
        .then(() => {
          this.logined = true
        })
        .catch(() => {})
    }
  }
}
</script>
<style scoped>
.item-swipe img {
  width: 100%;
  display: block;
}
#space {
  height: 100px;
}
.van-icon van-icon-thumb-circle-o {
  font-size: 30px;
}
#comment-area {
  margin: 0 10px;
}
.items-cur-price {
  color: #f44;
  font-size: 1.2em;
  font-weight: bold;
}
.items-ori-price {
  font-size: 0.8em;
  text-decoration: line-through;
  font-weight: normal;
}
.items-title {
  font-size: 1.25em;
  padding: 5px 0;
}
.items-class {
  font-size: 1em;
  padding: 5px 0;
  color: #7f8c8d;
}
</style>
